<template>
  <div id="admin">
    <el-card class="box-card">
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="用户名">
          <el-input v-model="userName"></el-input>
        </el-form-item>
        <el-form-item class="filtrate">
          <el-select v-model="condition" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            @click="query"
            icon="el-icon-search"
            style="margin-right:20px"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="download" id="download" style="margin-right:20px">下载列表</el-button>
        </el-form-item>
        <el-form-item>
          <router-link :to="'/admin/charts/'">
              <el-button type="primary">查看统计图</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="用户名" min-width="15%">
          <template slot-scope="scope">
            <i class="el-icon-service"></i>
            <span style="margin-left: 10px">{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" min-width="15%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" min-width="20%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.phoneNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" min-width="20%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="二维码总数" min-width="20%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.qrNum }}</span>
          </template>
        </el-table-column>

        <el-table-column label="已处理" min-width="10%" align="center">
          <template slot-scope="scope">
            <i class="el-icon-circle-check-outline"></i>
            <span style="margin-left: 10px">{{ scope.row.dealed }}</span>
          </template>
        </el-table-column>

        <el-table-column label="未处理" min-width="10%" align="center">
          <template slot-scope="scope">
            <i class="el-icon-warning"></i>
            <span style="margin-left: 10px">{{ scope.row.undealed }}</span>
          </template>
        </el-table-column>

        <el-table-column label="成功笔数" min-width="20%" align="center">
          <template slot-scope="scope">
            <i class="el-icon-success"></i>
            <span style="margin-left: 10px">{{ scope.row.succNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成进度" min-width="20%" header-align="center" align="center">
          <template slot-scope="scope">
            <el-progress
              :show-text="false"
              :percentage="parseFloat((1*100-(scope.row.undealed*100/(scope.row.undealed*100+scope.row.succNum*100))*100).toFixed(2))"
            ></el-progress>
            <span
              class="percentNum"
            >{{(1*100-(scope.row.undealed*100/(scope.row.undealed*100+scope.row.succNum*100))*100).toFixed(2)}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="10%" header-align="center">
          <template slot-scope="scope" align="left">
            <router-link :to="'/admin/detail/'+scope.row.userName">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>





<script>
import { queryList } from "../api/api";
import { downUserList } from "../api/api";
var Highcharts = require("highcharts");
require("highcharts/modules/exporting")(Highcharts);
export default {
  data() {
    return {
      lastLogin: "",
      lastIP: "",
      userName: "",
      stDate: "",
      ovDate: "",
      total: 100,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "已完成"
        },
        {
          value: "2",
          label: "未完成"
        }
      ],
      condition: "",
    };
  },
  methods: {
    change() {
      console.log(111);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      //分页
       //console.log(`每页 ${val} 条`);
       this.pageSize = val;
       this.query();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.query();
    },
    query() {
      let obj = {
        username: this.userName,
        condition: this.condition,  
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      //console.log(obj);
      queryList(obj).then(data => {
        this.pageSize = data.data.pageSize;
        this.total = data.data.totalNum;
        this.tableData = [];
        let jsonArray = data.data.list;
        if (!jsonArray) return;
        let loadingInstance = this.$loading({
          target: "#admin",
          text: "拼命加载中........"
        });
        setTimeout(() => {
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
          this.totalNum=0;
          this.totalDoneNum=0;
          for (let json of jsonArray) {
            let newJson = {};
            newJson.userId = json["matchingUserid"];
            newJson.userName = json["username"];
            newJson["qrNum"] = json["allCount"];
            newJson["dealed"] = json["processedCount"];
            newJson["undealed"] = json["untreatedCount"];
            newJson["succNum"] = json["successCount"];
            newJson["failedNum"] = json["failCount"];
            newJson["nickName"] = json["nickname"];
            newJson["phoneNum"] = json["phone"];
            newJson["email"] = json["email"];
            this.tableData.push(newJson);
          }
        }, 1000);
      });
    },
    download() {
      let json = {
        username: this.userName,
        condition: this.condition
      };
      downUserList(json).then(res => {
        console.log(res.data);
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = "导出信息.xls";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    }
  },
  created() {
    
  },
  mounted() {
    this.query();
  },
};
</script>




<style lang="less" scoped>
.el-col-2 {
  text-align: center;
}
.el-pagination {
  text-align: right;
}
#admin {
  margin-top: 30px;
}
.content {
  margin: 30px 0;
}

/deep/ .el-progress--line {
  width: 70px;
  display: inline-block;
  margin: 0 auto;
}
.percentNum {
  width: 20px;
  margin-left: 20px;
  text-align: left;
  position: relative;
}
</style>

